<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: tom
  Date: 2021/10/24
  Time: 13:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍展示页</title>
    <link type="text/css" rel="stylesheet" href=${pageContext.request.contextPath}/static/css/bootstrap.css>
    <link type="text/css" rel="stylesheet" href=${pageContext.request.contextPath}/static/css/allBook.css>
    <link rel="icon" href="${pageContext.request.contextPath}/static/img/favicon.ico" mce_href="${pageContext.request.contextPath}/static/img/favicon.ico" type="image/x-icon"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <%--    <style>header{margin-top: 20px;margin-bottom: 5px} .imga{width: 100%;margin-bottom: 3px}th a{color: black} th a:nth-of-type(2):hover{color: cornflowerblue} th{text-align: center} .dh{padding-bottom: 0px} .xin{margin-top: -24px} .xin a{font-size:9px;height: 22px;width: 41px;padding: 2px 0px;} .xin a:hover{color: black}</style>--%>
<body>
<div class="container">
    <%--    头部导航栏--%>
    <header>
        <ul class="nav nav-tabs nav-justified">
            <li class="nav-item active"><a class="nav-link active" href="#">首页</a></li>
            <li class="nav-item "><a class="nav-link disabled" href="#">精品</a></li>
            <li class="nav-item "><a class="nav-link disabled" href="#">书城</a></li>
            <li class="nav-item "><a class="nav-link disabled" href="#">文娱</a></li>
            <li class="nav-item "><a class="nav-link disabled" href="#">特色</a></li>
            <li class="nav-item "><a class="nav-link disabled" href="#">服务</a></li>
        </ul>
    </header>
    <%--    banner区--%>
    <div class="bannerl carousel slide" data-ride="carousel" id="demo">
<%--        <img src="${pageContext.request.contextPath}/static/img/ba.jpg" width="100%">--%>
    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="${pageContext.request.contextPath}/static/img/banner6.jpg" >
        </div>
        <div class="carousel-item">
            <img src="${pageContext.request.contextPath}/static/img/banner3.jpg" >
        </div>
        <div class="carousel-item">
            <img src="${pageContext.request.contextPath}/static/img/banner4.jpg">
        </div>
    </div>

    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
    </div>
    <%--    书籍区--%>
    <div style="height: 48px;background-color: #e9ecef;margin-bottom: 20px">
        <div class="row " style="margin-bottom: 2px">

            <div class="col-md-8 ">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">首页</li>
                        <li class="breadcrumb-item active" aria-current="page">书籍列表</li>
                    </ol>
                </nav>
            </div>
            <div class="col-md-4">
                <form style="margin-top: 6px" class="form-inline" method="post" action="${pageContext.request.contextPath}/query/byName">
                    <input class="form-control" type="search" name="bookName" placeholder="search for....">
                    <button class="btn btn-primary " type="submit">Search</button>
                </form>
            </div>
        </div>
    </div>
    <%--    表格区--%>
    <div class="xin row">
        <div class="col-md-12 column" style="margin-top: -17px">
            <table class="table table-hover table-striped table-bordered text-center">
                <thead>
                <tr>
                    <th>书籍编号</th>
                    <th>书籍名称</th>
                    <th>书籍数量</th>
                    <th>书籍详情</th>
                    <th><a href="#" style="text-decoration: none">操作</a>&nbsp;|
                        <a href="${pageContext.request.contextPath}/admin/toAddBook"
                           style="text-decoration: underline; ">新增</a>
                    </th>
                </tr>
                </thead>
<%--                表格体、遍历书籍--%>
                <tbody>
                <c:forEach var="book" items="${list}" varStatus="status">
                    <tr>
                        <td>${status.index+1}</td>
                        <td>${book.bookName}</td>
                        <td>${book.bookCounts}</td>
                        <td>${book.detail}</td>
                        <td>
                            <a href="${pageContext.request.contextPath}/update/toUpdateBook?id=${book.bookID}"
                               class="btn btn-primary">修改</a>&nbsp;|
                            <a href="${pageContext.request.contextPath}/delete/deleteBook/${book.bookID}"
                               class="btn btn-primary">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div class="nv">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <%--判断当前页面是否是第一页--%>
                        <c:if test="${page.isIsFirstPage()}">
                            <li class="disabled page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </c:if>
                        <%--判断页面是否有前一页即页面是否不是第一页--%>
                        <c:if test="${page.isHasPreviousPage()}">
                            <li class="page-item">
                                <a class="page-link" href="${pageContext.request.contextPath}/admin/queryAll?currentPage=${page.getPageNum()-1}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </c:if>

                        <c:forEach begin="1" end="${page.getPages()}" var="i" >
                            <c:if test="${page.getPageNum() == i}">
                                <li class="active page-item">
                                    <a class="page-link" href="${pageContext.request.contextPath}/admin/queryAll?currentPage=${i}">${i}</a>
                                </li>
                            </c:if>
                            <%--点击其他页，点第几页就跳转到第几页--%>
                            <c:if test="${page.getPageNum() != i}">
                                <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/admin/queryAll?currentPage=${i}">${i}</a></li>
                            </c:if>
                        </c:forEach>
                        <%--判断当前页面是否是最后一页--%>
                        <c:if test="${page.isIsLastPage()}">
                            <li class="disabled page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </c:if>
                        <%--判断当前页面不是最后一页--%>
                        <c:if test="${page.isHasNextPage()}">
                            <li class="page-item">
                                <a class="page-link" href="${pageContext.request.contextPath}/admin/queryAll?currentPage=${page.getPageNum()+1}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </c:if>

                        <span style="font-size: 18px;margin-left: 14px;">
                    共${page.getTotal()}条记录，共${page.getPages()}页
                </span>

                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
</body>
</html>
